<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>矩形树图</title>
    <script src="../../echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script>
    let mychart = echarts.init(document.getElementById("main"))
    let option = {
        title:{
            text:"矩形树图"
        },
        series:[
            {
                type:"treemap",
                data:[
                    {
                        name:'A',
                        value:10,
                        children:[{
                            name:"A1",
                            value:4
                        },
                        {
                            name:"A2",
                            value:6,
                            children:[{
                                name:"A21",
                                value:2
                            },
                            {
                                name:"A22",
                                value:4,
                                children:[
                                    {name:"A221",value:3},
                                    {name:"A222",value:1}
                                ]
                            }
                            ]
                        }
                        ]
                        
                    
                    }
                    ,{
                        name:'B',
                        value:20,
                        children:[
                            {name:"B1",value:12},
                            {name:"B2",value:18}
                        ]//B
                    }
                ]
            }
            ]
    }
    mychart.setOption(option)
</script>
</html>